<template>
  <div class="dashboard-container">
    <div class="dashboard-editor-container">
<!--      <github-corner class="github-corner" />-->

      <panel-group :count1date="count1" :count2date="count2" :count3date="count3" :count4date="count4" @handleSetLineChartData="handleSetLineChartData" />

      <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:10px;">
        <h1 class="beautiful-title">{{year}}年业务办理情况</h1>
        <line-chart v-if="newVisitis" :chart-data="newVisitis" />
      </el-row>
      <el-row :gutter="32">
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
          <h1 class="beautiful-title" >历史各个模块业务办理情况统计</h1>
            <pie-chart v-if="hisList" :hisdata="hisList"/>
          </div>
        </el-col>
        <el-col :xs="24" :sm="24" :lg="12">
          <div class="chart-wrapper">
          <h1 class="beautiful-title">本周各个模块办理情况统计</h1>
            <bar-chart v-if="weekData" :weekData="weekData"/>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import GithubCorner from '@/components/GithubCorner'
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RadarChart from '@/components/Echarts/RadarChart'
import PieChart from '@/components/Echarts/PieChart'
import BarChart from '@/components/Echarts/BarChart'
import Dict from '@/views/system/dict/index.vue'
import request from '@/utils/request'

const lineChartData = {
  newVisitis: {
    expectedData: [0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
    actualData: [0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
  },

   hisListData : [
    {
      "name": "个人账户",
      "value": 0
    },
    {
      "name": "转移接续",
      "value": 0
    },
    {
      "name": "退费管理",
      "value": 0
    },
    {
      "name": "参保管理",
      "value": 0
    }
  ],
  weekListData: {
      "account": [
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "transfer": [
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "refund": [
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
      "basic": [
        0,
        0,
        0,
        0,
        0,
        0,
        0
      ],
    },



}

export default {
  name: 'Dashboard',
  components: {
    Dict,
    GithubCorner,
    PanelGroup,
    LineChart,
    RadarChart,
    PieChart,
    BarChart
  },
  data() {
    return {
      year:new Date().getFullYear(),
      count1: 0,
      count2: 0,
      count3: 0,
      count4: 0,
      newVisitis: lineChartData.newVisitis ,
      hisList: lineChartData.hisList,
      weekData:lineChartData.weekData,
      // newVisitis: {} ,
      // hisList: [],
      // weekData: {},
    }
  },
  created() {
    this.getdate({ aaa100:'query' }).then(res => {
    this.count1=  res.acount1
    this.count2=  res.acount2
    this.count3=  res.acount3
    this.count4=  res.acount4
      // 直接替换整个数组/对象
      this.hisList = [...res.hisList] // 或 JSON.parse(JSON.stringify(res.hisList))
      this.weekData = { ...res.week } // 浅拷贝对象

      //正确更新 lineChartData
        this.newVisitis= {
          animationDuration: 2800, // 明确指定动画时长
          expectedData: res.expectedData,
          actualData: res.actualData
        }


    })

  },

  methods: {
    handleSetLineChartData(type) {
    //  this.lineChartData = lineChartData[type]
    },

    getdate(data) {
      return request({
        url: 'api/homePage',
        method: 'post',
        data
      })
    },

  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .dashboard-editor-container {
    padding: 32px;
    background-color: rgb(240, 242, 245);
    position: relative;

    .github-corner {
      position: absolute;
      top: 0;
      border: 0;
      right: 0;
    }

    .chart-wrapper {
      background: #fff;
      padding: 16px 16px 0;
      margin-bottom: 32px;
    }
  }

  .beautiful-title {
    font-family: "Microsoft YaHei", "黑体", "SimHei", sans-serif; /* 黑体系列 */
    font-size: 20px; /* 大字号 */
    font-weight: 700; /* 加粗 */
    text-align: left; /* 居中 */
    margin-left: 15px;
    color: #333; /* 深灰色文字 */

    /* 增强效果 */
    position: relative;
    padding-bottom: 15px;
    margin: 2px 0;
    line-height: 1.3;
    letter-spacing: 1px; /* 字间距 */
    text-transform: uppercase; /* 可选：字母大写 */

    /* 渐变文字颜色 (可选) */
    background: linear-gradient(135deg, #333 0%, #666 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;

    /* 文字阴影 */
    text-shadow: 1px 1px 3px rgba(0,0,0,0.1);

    /* 下划线装饰 */
    //&::after {
    //  content: "";
    //  position: absolute;
    //  bottom: 0;
    //  left: 50%;
    //  transform: translateX(-50%);
    //  width: 80px;
    //  height: 4px;
    //  background: linear-gradient(90deg, #ff7e5f, #feb47b);
    //  border-radius: 2px;
    //}

    /* 悬停效果 */
    transition: all 0.3s ease;
    &:hover {
      transform: scale(1.02);
      text-shadow: 2px 2px 8px rgba(0,0,0,0.15);
    }
  }

  @media (max-width:1024px) {
    .chart-wrapper {
      padding: 8px;
    }
  }
</style>
